<template>
  <div class="editForm">
    <el-form ref="edit"
             :model="data"
             label-width="100px">
      <div class="editLine"
           v-for="(item,key) in fd"
           :key="key">
        <el-form-item v-for="(val,idx) in formData"
                      :key="idx"
                      :prop="val.name"
                      :style="{maxWidth: val.width ? `${val.width}` : '140px',minWidth:val.width ? `${val.width}` : '140px'}">
          <el-input v-if="val.type === 'input'"
                    v-model="data[val.name + key]"
                    :placeholder="val.label || '请输入'"
                    v-bind="{...val.config}"></el-input>
          <!-- 选择框 -->
          <el-select v-if="val.type === 'select'"
                     v-model="data[val.name]"
                     :placeholder="val.label || '请选择'"
                     v-bind="{...val.config}">
            <el-option v-for="(item, key) in val.groups"
                       :key="key"
                       v-bind="{...item}"></el-option>
          </el-select>
          <!-- 日期选择器 -->
          <el-date-picker v-if="val.type === 'date_picker'"
                          type="date"
                          :placeholder="val.label || '选择日期'"
                          v-model="data[val.name]"
                          style="width: 100%;"
                          v-bind="{...val.config}"></el-date-picker>
          <!-- 时间选择器 -->
          <el-time-picker v-if="val.type === 'time_picker'"
                          :placeholder="val.label || '选择时间'"
                          v-model="data[val.name]"
                          style="width: 100%;"
                          v-bind="{...val.config}"></el-time-picker>
          <!-- 时间日期选择器 -->
          <el-date-picker v-if="val.type === 'date_time_picker'"
                          v-model="data[val.name]"
                          v-bind="{...val.config}"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker>
          <!-- 文本域 -->
          <el-input v-if="val.type === 'textarea'"
                    type="textarea"
                    :placeholder="val.label || '请输入'"
                    v-model="data[val.name]"
                    v-bind="{...val.config}"></el-input>
        </el-form-item>
        <div class="icon_group">
          <span class="icon_box"
                @click="addLine">
            <i class="el-icon-circle-plus"></i>
          </span>
          <span class="icon_box"
                @click="delLine">
            <i class="el-icon-remove"></i>
          </span>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: {},
      fd: []
    }
  },
  props: {
    // 表单数据
    formData: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 组件名
    form_name: {
      type: String,
      default: ''
    },
    // 默认值
    default_value: {
      default: []
    }
  },
  created () {
    this.createForm();
  },
  methods: {
    // 初始化表单数据
    createForm () {
      let data = {},
        rules = {},
        fd = this.fd,
        formData = this.formData,
        dv = this.default_value;
      console.log('dv====>', dv);
      if (dv.length > 0) {
        for (var i in dv) {
          fd.push(this.formData);
        }
      } else {
        fd.push(this.formData);
      }
      for (var i in fd) {
        if (dv.length > 0) {
          for(var j in formData){
            data[`${formData[j].name}${i}`] = dv[i][formData[j].name];
          }
        } else {
          for (var j in formData) {
            data[`${formData[j].name}${i}`] = ''
          }
        }
      }
      // for (var idx in this.formData) {
      //     data[this.formData[idx].name] = this.formData[idx].value;
      //   // if ("rules" in this.formData[idx]) {
      //   //   rules[this.formData[idx].name] = this.formData[idx].rules;
      //   // }
      // }
      this.data = this.$utils.deepClone(data);
      console.log(this.data)
    },
    // 增加行数
    addLine () {
      console.log(this.fd)
      console.log(this.formData)
      this.fd.push(this.formData);
      this.addHandler();
    },
    addHandler () {
      let data = this.data,
        fd = this.fd,
        formData = this.formData;
      for (var j in formData) {
        data[`${formData[j].name}${fd.length - 1}`] = ''
      }
      this.data = this.$utils.deepClone(data);
    },
    // 减少行数
    delLine () {
      console.log(this.fd)
      console.log(this.formData)
      this.delHandler();
    },
    delHandler () {
      let data = this.data,
        fd = this.fd,
        formData = this.formData;
      for (var j in formData) {
        delete data[`${formData[j].name}${fd.length - 1}`];
      }
      this.fd.pop();
    },

    // 处理表单元素
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let newData = {
            valid,
            data: this.data
          };
          this.formData.forEach(item => {
            if (item.type == 'editor') {
              formData.data[item.name] = this.$refs.editor[0].value || ''
            }
          })
          let fd = this.fd,
            formData = this.formData,
            data = this.data,
            arr = []

          for (var i in fd) {
            let obj = {}
            Object.keys(data).forEach(item => {
              for (var j in formData) {
                if (item == formData[j].name + i) {
                  if (!data[item]) {
                    continue;
                  }
                  obj[formData[j].name] = data[item]
                }
              }
            })
            let count = 0;
            for (var idx in obj) {
              count = 1;
            }
            if (count == 1) {
              arr.push(obj);
            }
          }


          this.$emit("editSumbit", { data: arr, name: this.form_name });
        } else {
          throw "error submit!!";
        }
      });
    },
    // 重置表单
    resetForm (formName) {
      let fd = this.formData;
      this.$refs[formName].resetFields();
      this.data = {};
      for (var idx in fd) {
        if (fd[idx].type === "data_upload" || fd[idx].type === "image_upload") {
          this.$refs[fd[idx].name][0].$children[0].clearFiles();
        }
      }
      this.$emit("reset", true);
    },
  },
}
</script>

<style lang="scss" scoped>
.editLine {
  display: flex;
}
/deep/.el-form-item__content {
  margin-left: 0px !important;
}
.icon_group {
  display: flex;
  .icon_box {
    height: 40px;
    cursor: pointer;
    display: inline-block;
    margin-left: 10px;
    margin-top: 3px;
    font-size: 30px;
    &:hover {
      color: #409eff;
    }
  }
}
</style>